
<form class="layui-form" action="" lay-filter="component-form-group">
    <script type="text/html" template lay-url="{{ layui.setter.baseUrl }}member/edit?id={{ d.params.id }}" 
            lay-done="layui.form.render(null, 'component-form-group');">
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button
                        type="button"
                        class="layui-btn"
                        id="avatar-upload"
                        data-uploadtype="{{ d.data.uploadtype }}"
                        data-uploadurl="{{ d.data.uploadurl }}"
                        data-cdnurl="{{ d.data.cdnurl }}"
                        >上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="avatar-upload-img" width="92" src="{{ d.data.avatar }}">
                        <p id="test-upload-demoText"></p>
                    </div>
                </div>
                <input type="hidden" id="data-avatar" name="data[avatar]" value="{{ d.data.avatar }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">openid</label>
            <div class="layui-input-block">
                <input type="text" name="data[openid]" value="{{ d.data.openid }}" lay-verify="required" autocomplete="on" placeholder="请输入openid" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item tpl-district-container">
            <label class="layui-form-label">地区</label>
            <div class="layui-inline">
                <select name="data[province]" data-value="{{ d.data.province }}" lay-filter="tpl-province" class="form-control tpl-province">
                </select>
            </div>
            <div class="layui-inline">
                <select name="data[city]" data-value="{{ d.data.city }}" lay-filter="tpl-city" class="form-control tpl-city">
                </select>
            </div>
            <div class="layui-inline">
                <select name="data[area]" data-value="{{ d.data.area }}" lay-filter="tpl-district" class="form-control tpl-district">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="data[nickname]" value="{{ d.data.nickname }}" autocomplete="on" placeholder="请输入昵称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="data[realname]" value="{{ d.data.realname }}" autocomplete="on" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="data[mobile]" value="{{ d.data.mobile }}" autocomplete="on" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="data[gender]" value="0" title="女" {{#  if(d.data.gender == 0){ }}checked=""{{#  } }}>
                <input type="radio" name="data[gender]" value="1" title="男" {{#  if(d.data.gender == 1){ }}checked=""{{#  } }}>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <input type="hidden" id="token" name="data[token]" value="{{ d.data.token }}">
                    <input type="hidden" name="id" value="{{ d.data.id }}">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1" name="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </script>
</form>

<script>
    layui.use(['admin', 'form', 'upload'], function (data) {
        var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form
                , upload = layui.upload;
        var siv = setInterval(function () {
            if ($('#avatar-upload').length > 0) {
                var uploadtype = $('#avatar-upload').data('uploadtype');
                switch (uploadtype) {
                    case 'qiniu':
                        var upload_data = {
                            'token': function () {
                                var upload_token = '';
                                $.ajax({
                                    type: "GET",
                                    url: layui.setter.baseUrl + 'upload.qiniu_upload_token',
                                    async: false, //同步方式
                                    success: function (ret) {
                                        upload_token = ret.data;
                                    }
                                });
                                return upload_token;
                            }
                        };
                        break;

                    default:
                        var upload_data = {};
                        break;
                }
                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#avatar-upload'
                    , url: $('#avatar-upload').data('uploadurl')
                    , data: upload_data
                    , before: function (obj) {
                        layer.load(); //上传loading
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#avatar-upload-img').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function (res) {
                        layer.closeAll('loading'); //关闭loading
                        //如果上传失败
                        if (res.code > 0) {
                            if (res.msg != '') {
                                return layer.msg(res.msg);
                            } else {
                                return layer.msg('上传失败');
                            }
                        } else {
                            //上传成功
                            switch (uploadtype) {
                                case 'qiniu':
                                    var imgkey = res.key
                                    break;
                                default:
                                    var imgkey = res.data.key
                                    break;
                            }
                            $('#data-avatar').val($('#avatar-upload').data('cdnurl') + '/' + imgkey);
                            return layer.msg('上传成功');
                        }
                    }
                    , error: function () {
                        layer.closeAll('loading'); //关闭loading
                        //演示失败状态，并实现重传
                        var demoText = $('#test-upload-demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });
                $.get(layui.setter.base + "lib/extend/district.js?v=004", function (data) {
                    var componentname = 'component-form-group';
                    eval(data);
                }, "text");
                layer.closeAll('loading'); //关闭loading
                clearInterval(siv);
            }
        }, 200);
        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            data.field['data[province]'] = data.field['data[province]'].split(',')[0];
            data.field['data[city]'] = data.field['data[city]'].split(',')[0];
            data.field['data[area]'] = data.field['data[area]'].split(',')[0];
            $.post(
                    layui.setter.baseUrl + 'member/edit',
                    data.field,
                    function (ret) {
                        var {code, msg, data} = ret;
                        layer.msg(msg);
                        $('#token').val(data.token);
                        if (code == 0) {
                            layer.closeAll('page');
                            layui.table.reload('LAY-user-manage');
                        }
                    }
            );
            return false;
        });
    });
</script>